
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  --borderBg: #656565;
  --h: 600px;
  --w: 1000px;
  --diff: -30px;
  position: relative;
  perspective: var(--h);
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  transform: rotateX(45deg);
}

/* svg */
.path {
  position: absolute;
  transform: translateY(var(--diff));
  width: calc(var(--w));
  height: calc(var(--h));
}

/* 轨道1 */
.shape {
  position: absolute;
  width: var(--w);
  height: var(--h);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* 轨道2 */
.shape-2 {
  transform: translateY(var(--diff));
}

#s-uPathPatternRect {
  fill: #c3c3c3 !important;
}
#s-uPathPatternRect2 {
  fill: #959595 !important;
}

.conveyer {
  --barColor: rgb(71, 43, 0);
  --barColor2: transparent;
  --barW: 10px;
  box-sizing: border-box;
  width: 75%;
  height: 40%;
  overflow: hidden;
  background-color: #e7e7e700;
  transform: translateY(calc(var(--diff) / 2));
}

.conveyer-content {
  --beltW: 10px;
  animation: scroll 30s linear infinite;
  box-sizing: border-box;
  height: 100%;
  width: 200%;
  background-image: repeating-linear-gradient(90deg, var(--barColor),
      var(--barColor) var(--barW),
      var(--barColor2) var(--barW),
      var(--barColor2) calc(2 * var(--barW)));
  transform: translateY(var(--diff));
  padding: 10px 0;
  border-style: solid;
  border-width: var(--beltW) 0 var(--beltW) 0;
  border-color: #5f5d5d;
}

.conveyer-stone {
  --stoneWidth: 40px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-image: url('./stone.svg') , url('./stone.svg'), url('./stone.svg');
  background-repeat: repeat;
  background-position: center;
  background-size:calc(var(--stoneWidth)/ 1.7), calc(var(--stoneWidth)/ 1.2), calc(var(--stoneWidth)/ 1.5);
}

@keyframes scroll {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

.ani-title {
  background-image: linear-gradient(to right, #0778a9, #61b9df);
  border-style: solid;
  border-width:  0 0 3px 0;
  border-image: linear-gradient(to right, #9eddf7, #61b9df) 4;
  margin: 0;
  padding: 6px 0 6px 15px;
}